<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>接口测试</title>
	<meta content="text/html;charset=utf-8" http-equiv="content-type">
	<link rel="stylesheet" href="{{ URL::asset('/vendor/admin/frame/bootstrap/css/bootstrap.css') }}">
	<link rel="stylesheet" href="{{ URL::asset('/vendor/api/jquery-jsonview-master/jquery.jsonview.min.css') }}">
	<script src="{{ URL::asset('/vendor/api/js/jquery-v1.12.4.min.js') }}"></script>
	<script src="{{  URL::asset('/vendor/admin/frame/bootstrap/js/bootstrap.min.js') }}"></script>
	<script src="{{ URL::asset('/vendor/api/jquery-jsonview-master/jquery.jsonview.min.js') }}"></script>
	<style type="text/css">
		html,
		body,
		.layout {
			margin: 0;
			padding-right: 7px;
			width: 100%;
			height: 100%;
			border: 0;
			font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
			font-size: 13px;
		}

		a {
			color: #3FAD67;
			cursor: pointer;
		}

		a:hover {
			color: #009509;
		}

		.layout .left {
			padding: 20px 0;
			width: 670px;
			height: 80%;
			overflow-y: auto;
			vertical-align: top;
		}

		.layout .right {
			padding: 15px;
			vertical-align: top;
			max-width: 300px;
		}

		input {
			height: 25px;
			line-height: 25px;
			width: 192px;
			padding: 0 4px;
		}

		input.key {
			width: 60px;
		}

		input.value {
			width: 140px;
		}

		select {
			height: 31px;
			line-height: 31px;
			width: 204px;
		}

		input[type=submit] {
			cursor: pointer;
			height: 40px;
			padding: 0 20px;
			color: #3FAD67;
		}

		.table_param {
			float: left;
		}

		.table_param th {
			font-weight: normal;
			text-align: right;
			padding-right: 5px;
			color: #5E9DD5;
		}

		.table_param td {
			padding: 5px;
		}

		.table_param2 {
			margin-right: 0px;
			float: right;
		}

		.table_param2 .param_del {
			text-align: right;
			padding-right: 10px;
		}

		.footer {
			min-height: 100px;
			overflow-y: auto;
		}

		.left:before {
			content: "构造参数："
		}

		.footer:before {
			content: "请求参数：";
			font-size: x-large;
			font-style: italic;
		}

		.right:before {
			content: "返回参数：";
			font-size: x-large;
			font-style: italic;
		}
		#full-url:before{
			content:"请求地址："
		}
		#othder-tool:before{
			content:"其他工具：";
		}
		.exception:before{
			content:"错误或异常信息：";
			font-size: x-large;
			font-style: italic;
		}

		.footer>span {
			padding: 0 10px;
			display: block;
			line-height: 25px;
			border-bottom: 1px dashed #CCC;
		}

		.jsonview {
			font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
		}

		.jsonview .collapser {
			display: none;
		}

		.jsonview li>a.prop+a>.q {
			color: #3FAD67;
			display: contents;
		}

		.jsonview li>a.prop+a>.q {
			color: #3FAD67;
			display: contents;
		}

		.row {
			height: 100%;
		}

		.row>div {
			overflow-y: auto;
			height: 100%;
		}

		.inner-row>div {
			padding: 0px
		}

		.select-input {
			width:192px;
			height:25px;
		}

		.input-none {
			outline:none;
		}
	</style>
</head>

<body>
	<div class="row" style=" margin-right: -14px; ">
		<div class='col-md-4 col-lg-4'>
			<div class="inner-row">
				<div class="col-md-12 col-lg-12">
					<div class="left alert alert-warning col-md-12 col-lg-12" role="alert" style=" padding-right: 0px; ">
						<form action="{{ url('api/Sandbox_submit') }}" method="post" enctype="multipart/form-data" class="form">
							<table cellspacing="0" cellpadding="0" border="0" class="table_param">
								<tr>
									<th width="80">client</th>
									<td>
										<select name="ClientSource" class="select-input input-none">
											<option value="-1">Sandbox</option>
											<option value="3">Wap</option>
											<option value="2">IOS</option>
											<option value="1">Android</option>
										</select>
									</td>
								</tr>
								<tr>
									<th>ClientVersion</th>
									<td>
										<input type="text" name="ClientVersion" value="20180523"  class="input-none" />
									</td>
								</tr>
								<tr>
									<th>sign</th>
									<td>
										<input type="text" name="sign" value=""  class="input-none" />
									</td>
								</tr>
								<tr>
									<th>ticket</th>
									<td>
										<input type="text" name="ticket" value=""  class="input-none" />
									</td>
								</tr>
								<tr>
									<th>cmd</th>
									<td>
										<input type="text" name="_cmd" value="index_index"  class="input-none" />
									</td>
								</tr>
							</table>
							<table cellspacing="0" cellpadding="0" border="0" class="table_param table_param2">
								<tr>
									<th>扩展参数</th>
									<td>
										<input name="key[]" class="key input-none" />：<input name="value[]" class="value input-none" />
									</td>
								</tr>
								<tr>
									<th>
										<a href="javascript:;" class="param_add">添加一个</a>
									</th>
									<td></td>
								</tr>
							</table>


					<input type="hidden" id="___submit" name="___submit" value=''/>
			<div class="btn-group col-md-12 col-lg-12" role="group" aria-label="...">
					<button type="button" class="btn btn-success submit-btn" style="float:right;margin-left:40px;" data-value="post">提交请求</button>
					<button type="button" class="btn btn-sm btn-default submit-btn" style="float:right" data-value="pre">生成请求参数</button>
			</div>

								
						</form>
					</div>
				</div>
			</div>
			<div class="inner-row">
				<div class="col-md-12 col-lg-12" style="border-top:1px solid #CCC;">
					<div class="footer alert alert-success" role="alert">
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#footer-json" aria-controls="footer-json" role="tab" data-toggle="tab">json格式</a></li>
							<li role="presentation"><a href="#footer-request-header" aria-controls="footer-request-header" role="tab" data-toggle="tab">请求头部</a></li>
							<li role="presentation"><a href="#footer-before-sign" aria-controls="footer-before-sign" role="tab" data-toggle="tab">参与签名字符串</a></li>
						</ul>

						<!-- Tab panes -->
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="footer-json"><div class="panel panel-default"><div class="panel-body"></div></div></div>
							<div role="tabpanel" class="tab-pane" id="footer-request-header"><div class="panel panel-default"><div class="panel-body"></div></div></div>
							<div role="tabpanel" class="tab-pane" id="footer-before-sign"><div class="panel panel-default"><div class="panel-body"></div></div></div>
						</div>

					<div id="full-url"></div>

					</div>

					<div id="othder-tool">
					<a  class="btn btn-link" href="./Sandbox_html" target="_blank" role="button">HTML页面测试</a>
					</div>


				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-8" style="padding: 0px;">
			<div class="right alert alert-info" role="alert">

			</div>
			<div class="exception alert alert-danger" role="alert" style="display:none">

			</div>
		</div>


	</div>
	<script>
		$(function () {
			$('.submit-btn').click(function(){
				$('#___submit').val($(this).data('value'));
				$('.form').submit();
			});
			$('.form').submit(function () {
				$('.exception').hide();
				var $t = $(this), action = $t.attr('action'), post = $t.serialize();
				var $right = $('.right'), cmd = $('[name=cmd]').val();console.log($(this).data('value'));
//				post.___submit = $(this).data('value');consloe.log($(this).data('value'));return false;
				$.post(action, post, function (data) { console.log(data);
					/* 				$right.html('<pre>'+msg+'</pre>'); */
					if (data.token) {
						console.log('token:' + data.token);
					}
					$('[name=sign]').val(data.sign);
					$('.footer #footer-json .panel-body').JSONView(data.request, { nl2br: true });
					$('.footer #footer-request-header .panel-body').html(data.request_http);
					$('.footer #footer-before-sign .panel-body').text(data.request_before_sign_str);
					$('.footer #full-url').text(data.full_url);
					if (data.exception){
						$('.exception').html('<br/><br/>异常文件:'+ data.exception.file+' 【行号:'+ data.exception.line+'】<br/>异常原因：'+data.response.info).show();
					}
					
					data.response?$('.right').JSONView(data.response):$('.right').empty();
					$('.jsonview li>a.prop+a').attr('target', '_blank');
				}, 'json');
				return false;
			});
			$('.param_add').click(function () {
				var $t = $(this), dom = '<tr><th class="param_del"><a class="param_del_a">X</a></th><td><input name="key[]" class="key input-none" />：<input name="value[]" class="value input-none" /></td></tr>';
				$t.closest('tr').before(dom);
				$t.closest('tr').prev().find('input:eq(0)').focus();
			});

			$('.table_param2').on('click', '.param_del', function () {
				$(this).closest('tr').remove();
			});
		});

		function log(log) {
			var $log = $('.footer');
			$log.prepend('<span>' + log + '</span>');
		}
		function ticket(ticket) {
			var $ticket = $('[name=ticket]');
			if (ticket) {
				$ticket.val(ticket);
			}
		}
		function sign(sign) {
			var $sign = $('[name=sign]');
			$sign.val(sign);
		}
		function right(text) {
			var $right = $('.print_r');
			$right.append(text);
		}
	</script>
</body>

</html>